<template>
  <div class="video-container">
    <div class="overlay"></div>
    <!-- <video
      ref="videoRef"
      autoplay
      loop
      muted
      playsinline
      @error="handleVideoError"
      :src="videoUrl"
    ></video> -->

    <el-carousel style="height: 100vh">
      <el-carousel-item v-for="item in bannerList" :key="item">
        <div class="banner-image">
          <img :src="item.imageUrl" alt="" />
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="website-describe">
      <!-- <h2 data-aos="custom-slide-down">{{ t("homeHero.title") }}</h2>
      <p class="describe" data-aos="custom-slide-down">
        {{ t("homeHero.desc") }}
      </p> -->
      <!-- <div class="btns" data-aos="custom-slide-up">
        <button type="primary" class="joinUs" @click="testApi">
          {{ t("homeHero.joinUs") }}
        </button>
        <button type="primary" class="checkOutTheEvent">
          {{ t("homeHero.viewEvents") }}
        </button>
      </div> -->
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  bannerList: {
    type: Array,
    default: () => [],
  },
});
import { useI18n } from "vue-i18n";
const { t } = useI18n();
// 只在服务端执行

// const { data, error } = useAsyncData('login', () => loginApi(), { server: true, })

// testApi()
// loginApi()
// const testApi = async () => {
//     // 你可以在按钮点击时再请求一次
//     const { data, error } = await loginApi()
//     console.log('data', data)
// }

// const videoRef = ref(null);

// const handleVideoError = (e) => {
//   console.error("视频加载失败:", e);
// };

// onMounted(() => {
//   if (videoRef.value) {
//     videoRef.value.play().catch((error) => {
//       console.error("视频播放失败:", error);
//     });
//   }
// });
</script>

<style scoped lang="less">
.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  //   video {
  //     width: 100%;
  //     height: 100%;
  //     object-fit: cover;
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //   }
  :deep(.el-carousel__container) {
    height: 100%;
  }

  :deep(.el-carousel__item) {
    height: 100%;
  }

  :deep(.el-carousel__indicators--horizontal) {
    bottom: 50px;
  }

  .banner-image {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .website-describe {
    width: 100%;
    min-width: 800px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);

    h2 {
      color: #ffffff;
      font-family: Helvetica, Helvetica;
      font-weight: 400;
      font-size: 40px;
      color: #ffffff;
      text-align: center;
    }

    .describe {
      width: 100%;
      font-family: Helvetica, Helvetica;
      font-weight: 400;
      font-size: 26px;
      color: #ffffff;
      text-align: center;
      margin-top: 51px;
    }

    .btns {
      width: 100%;
      margin-top: 76px;

      .joinUs {
        padding: 20px 40px;
        background: var(--theme-gradient-bg);
        font-family: Helvetica, Helvetica;
        font-weight: bold;
        font-size: 20px;
        color: #ffffff;
        border: none;
        margin-right: 30px;
        cursor: pointer;
      }

      .checkOutTheEvent {
        padding: 20px 40px;
        background-color: transparent;
        font-family: Helvetica, Helvetica;
        font-weight: bold;
        font-size: 20px;
        color: #ffffff;
        border: none;
        border: 1px solid #ffffff;
        cursor: pointer;
      }
    }
  }
}
</style>
